<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>

	<!-- import CSS -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>

	<style>
		@import url("https:unpkg.com/element-ui@2.15.7/lib/theme-chalk/index.css");

		.el-table .warning-row {
			background: oldlace;
		}

		.el-table .success-row {
			background: #f0f9eb;
		}
	</style>

</head>

<body>
	<div id="app" class="scott-table">
		<template>
			<el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
				<el-table-column prop="id" label="#" width="180">
				</el-table-column>
				<el-table-column prop="roleName" label="角色名称" width="180">
				</el-table-column>
				<el-table-column prop="roleCode" label="角色编码">
				</el-table-column>
			</el-table>
		</template>
	</div>


</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script src="../js/axios.min.js"></script>
<script src="../js/common.js"></script>
<script src="../js/ajax.js"></script>

<script>




	var Main = {
		methods: {
			tableRowClassName({ row, rowIndex }) {
				if (rowIndex === 1) {
					return 'warning-row';
				} else if (rowIndex === 3) {
					return 'success-row';
				}
				return '';
			},
			get() {

				axios.get('http://localhost:8080/userRole/findAll?pageNumber=1&pageSize=5').then(function () {
					console.log(dataR);
					var code = dataR.data.code;

					var data = dataR.data.data;
					var userRoles = data.userRoleList;

					var pageNumber = data.pageNumber;
					var totalCounter = data.totalCounter;
					var totalPage = data.totalPage;

					//vue.userRoles = userRoles;
					//vue.pageNumber = pageNumber;
					//vue.totalCounter = totalCounter;
					//vue.totalPage = totalPage;

					//vue.roles = data.roleList;

				});

			}
		},
		data() {
			return {
				tableData: get()/* [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄',
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄',
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }] */
			}
		}
	}
	var Ctor = Vue.extend(Main)
	new Ctor().$mount('#app')
</script>

</html>